import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useThemeStore = defineStore('theme', () => {
  // 主题列表
  const themes = [
    { 
      id: 'blue', 
      name: '清爽蓝',
      primary: '#409EFF', 
      secondary: '#79BBFF',
      background: '#F5F7FA',
      gradient: 'linear-gradient(to right bottom, #EBF2FB, #F5F7FA)',
      cardBackground: '#FFFFFF',
      borderColor: '#E4E7ED',
      textPrimary: '#303133',
      textSecondary: '#606266'
    },
    { 
      id: 'green', 
      name: '清新绿', 
      primary: '#67C23A', 
      secondary: '#95D475',
      background: '#F5FAF5',
      gradient: 'linear-gradient(to right bottom, #EDF7E5, #F5FAF5)',
      cardBackground: '#FFFFFF',
      borderColor: '#E4EDDF',
      textPrimary: '#303133',
      textSecondary: '#606266'
    },
    { 
      id: 'purple', 
      name: '典雅紫', 
      primary: '#8E44AD', 
      secondary: '#9B59B6',
      background: '#F7F3FA',
      gradient: 'linear-gradient(to right bottom, #F0E6F6, #F7F3FA)',
      cardBackground: '#FFFFFF',
      borderColor: '#E6E0ED',
      textPrimary: '#303133',
      textSecondary: '#606266'
    },
    { 
      id: 'orange', 
      name: '活力橙', 
      primary: '#E6A23C', 
      secondary: '#F0C78A',
      background: '#FDF8F0',
      gradient: 'linear-gradient(to right bottom, #FAF0E1, #FDF8F0)',
      cardBackground: '#FFFFFF',
      borderColor: '#EEEADC',
      textPrimary: '#303133',
      textSecondary: '#606266'
    },
    { 
      id: 'red', 
      name: '热情红', 
      primary: '#F56C6C', 
      secondary: '#F89898',
      background: '#FDF5F5',
      gradient: 'linear-gradient(to right bottom, #FAEAEA, #FDF5F5)',
      cardBackground: '#FFFFFF',
      borderColor: '#EDDFDF',
      textPrimary: '#303133',
      textSecondary: '#606266'
    },
    { 
      id: 'teal', 
      name: '沉稳青', 
      primary: '#20B2AA', 
      secondary: '#5FD3CE',
      background: '#F2FAFA',
      gradient: 'linear-gradient(to right bottom, #E5F5F4, #F2FAFA)',
      cardBackground: '#FFFFFF',
      borderColor: '#DFE9E8',
      textPrimary: '#303133',
      textSecondary: '#606266'
    },
    { 
      id: 'dark', 
      name: '暗黑模式', 
      primary: '#6D5CFF', 
      secondary: '#8B7EFA',
      background: '#232429',
      gradient: 'linear-gradient(to right bottom, #1C1E22, #232429)',
      cardBackground: '#2C2C34',
      borderColor: '#3C3C45',
      textPrimary: '#E5E7EB',
      textSecondary: '#9CA3AF'
    },
  ]
  
  // 当前主题，从本地存储加载或使用默认主题
  const currentTheme = ref(localStorage.getItem('theme') || 'blue')
  
  // 更新主题的函数
  function setTheme(themeId) {
    currentTheme.value = themeId
    localStorage.setItem('theme', themeId)
    
    // 获取所选主题的颜色
    const theme = themes.find(t => t.id === themeId)
    if (theme) {
      // 应用主题颜色到CSS变量
      document.documentElement.style.setProperty('--el-color-primary', theme.primary)
      document.documentElement.style.setProperty('--el-color-primary-light-3', theme.secondary)
      
      // 应用背景和文本颜色
      document.documentElement.style.setProperty('--app-background', theme.background)
      document.documentElement.style.setProperty('--app-background-gradient', theme.gradient)
      document.documentElement.style.setProperty('--app-card-background', theme.cardBackground)
      document.documentElement.style.setProperty('--app-border-color', theme.borderColor)
      document.documentElement.style.setProperty('--app-text-primary', theme.textPrimary)
      document.documentElement.style.setProperty('--app-text-secondary', theme.textSecondary)
      
      // 添加或移除暗色模式类
      if (theme.id === 'dark') {
        document.documentElement.classList.add('dark-theme')
      } else {
        document.documentElement.classList.remove('dark-theme')
      }
    }
  }
  
  // 获取当前主题对象
  const getCurrentThemeObject = computed(() => {
    return themes.find(t => t.id === currentTheme.value) || themes[0]
  })
  
  // 初始化主题
  function initTheme() {
    setTheme(currentTheme.value)
  }
  
  return { currentTheme, themes, setTheme, initTheme, getCurrentThemeObject }
}) 